<template>
  <div class="view-page">
    <div class="wrap-left">
      <div class="head">
        <div class="left">
          <a href="/" class="logo"></a>
        </div>
        <div class="center">
          <div class="title">{{title}}</div>
        </div>
        <div class="right">
          <div>
            <i class="material-icons icon-button" @click="replay">replay</i>
            <i
              v-show="!isStar"
              class="material-icons icon-button"
              @click="starVideo"
            >favorite_border</i>
            <i
              v-show="isStar"
              class="material-icons icon-button"
              @click="starVideo"
              style="color:RED"
            >favorite_border</i>
          </div>
        </div>
      </div>
      <div class="video">
        <iframe
          v-if="url_video"
          :src="url_video"
          frameborder="0"
          scrolling="no"
          style="width: 100%;height: 100%"
        ></iframe>
        <!-- <video ref="videojs" class="video-js" style="width: 100%;height: 100%"></video> -->
      </div>
    </div>
    <div class="wrap-right">
      <div class="tab">
        <TabBar @change="change" :navbarItems="headTabs" />
      </div>
      <div class="scroll" v-show="tabIndex===0">
        <div class="titles">
          <div class="title">{{video.title}}</div>
          <div class="like">{{video.like}}</div>
        </div>

        <van-tabs v-model="active_res" type='card' background="#2b2c2f" color='#fd8d29' title-active-color='#FFF' title-inactive-color='#bfbfba'>
          <van-tab  v-for="(item,index) in videoList" :key='index' :title="line_list[index]">
            <div class="piece-container">

              <span
                class="items"
                @click="select(vo['video_link'],i)"
                :class="{active:currentLink==vo.video_link}"
                v-for="(vo,i) in item"
                :key="i"
              >{{vo['link_url_title']}}</span>
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <div class="scroll" v-show="tabIndex===1">
        <div class="video-info">
          <div class="image">
            <img :src="video.image" alt />
          </div>
          <div class="video">
            <div class="item">
              <span class="key">片名:</span>
              <span class="value">{{video.title}}</span>
            </div>
            <div class="item">
              <span class="key">演员:</span>
              <span class="value">{{video.star}}</span>
            </div>
            <div class="item">
              <span class="key">导演:</span>
              <span class="value">{{video.leader}}</span>
            </div>
            <div class="item">
              <span class="key">类型:</span>
              <span class="value">{{video.type}}</span>
            </div>
            <div class="item">
              <span class="key">地区:</span>
              <span class="value">{{video.area}}</span>
            </div>
            <div class="item">
              <span class="key">年份:</span>
              <span class="value">{{video.year}}</span>
            </div>
            <div class="item">
              <span class="key">更新时间:</span>
              <span class="value">{{video.time_text}}</span>
            </div>
          </div>
        </div>
        <div class="video-desc">
          <div class="title">简介</div>
          <div class="content">{{video.desc_content}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TabBar from '@/pc/components/TabBar/Index';
import CryptoJS from 'crypto-js';
// import videojs from "video.js";
// import "video.js/dist/video-js.css";
import Cache from '@/vendor/cache';
import { Tabs, Tab } from 'vant';

export default {
  data() {
    return {
      headTabs: ['播放列表', '影片详情'],
      loading: false,
      videoList: {},
      active_res: 0,
      title: '',
      activeIndex: 0,
      video: {
        title: '--',
        image: [],
        video_link: ''
      },
      tabIndex: 0,
      currentLink: '',
      url_video: '',
      player: null,
      cache: null,
      isStar: false,
      player: null,
      option: {
        autoplay: 'muted',
        controls: true,
        muted: false,
        fullscreen: {
          options: { navigationUI: 'hide' }
        },
        line_list: []
      }
    };
  },
  components: { TabBar, [Tabs.name]: Tabs, [Tab.name]: Tab },
  mounted() {
    this.cache = new Cache();
    this.init();
  },
  created() {},
  beforeDestroy() {
    // if (this.player) {
    //   this.player.dispose();
    // }
  },
  methods: {
    init() {
      let list = this.cache.getAllStar();
      if (list[this.$route.params.id]) {
        this.isStar = true;
      }
      let cid = encodeURIComponent(
        this.secret(this.$route.params.cid, 'w9M0mU6vQwgmoLjY')
      );
      cid = cid.replace(/%/g, '_');
      this.getVideoByCid(cid).then(res => {
        this.video = res.video;
        document.title = this.baseTitle + '-' + this.video.title;
        let like = 5 + Math.random() * 5;
        this.video['like'] = like.toFixed(1);
        this.videoList = res.video_resource;
        this.line_list = res.res_list;
        // this.videoList.sort((a, b) => {
        //   return a["sort"] - b["sort"];
        // });
        // this.videoList.forEach(vo => {
        //   const link = this.secret(vo.video_link, "w9M0mU6vQwgmoLjY", true);
        //   this.option.sources.push({ src: link });
        // });

        // this.player = videojs(this.$refs.videojs,this.option, function onPlayerReady() { })
        // console.log(this.line_list);
        let link = this.getInitLink();
        this.playVideo(link);
        this.setVideoRecord(link);
      });
    },
    change(index) {
      this.tabIndex = index;
    },
    select(option, index) {
      this.activeIndex = index;
      let link = this.videoList[this.active_res][index]['video_link'];
      this.playVideo(link);
      this.setVideoRecord(link);
    },
    getInitLink() {
      let arr = this.cache.getAllRecord();
      let record = arr[this.$route.params.cid];
      let link = '';
      if (record && record.hasOwnProperty('res_index')) {
        this.active_res = record['res_index'];
        link = record['link'];
      } else {
        if (this.videoList[this.active_res].length > 0) {
          link = this.videoList[this.active_res][0].video_link;
        }
      }

      return link;
    },
    playVideo(link) {
      this.videoList[this.active_res].forEach((vo, index) => {
        if (vo['video_link'] == link) {
          this.activeIndex = index;
        }
      });
      this.title =
        this.video.title +
        '  ' +
        this.videoList[this.active_res][this.activeIndex]['link_url_title'];
      this.currentLink = link;
      let video_link = this.secret(link, 'w9M0mU6vQwgmoLjY', true);
      if (/.m3u8|.mp4|.flv/.test(video_link)) {
        this.url_video = 'm3u8.html?url=' + video_link;
      } else {
        this.url_video = video_link;
      }
    },
    setVideoRecord(link) {
      let item_title = '';
      this.videoList[this.active_res].forEach(vo => {
        if (vo['video_link'] == link) {
          item_title = vo['link_url_title'];
        }
      });

      let record = {
        title: this.video['title'],
        image: this.video['image'],
        link: link,
        res_index: this.active_res,
        item_title: item_title,
        time: new Date().getTime()
      };
      this.cache.setRecord(this.$route.params.cid, record);
    },
    replay() {
      window.location.reload();
    },
    starVideo() {
      let list = this.cache.getAllStar();
      if (list[this.$route.params.cid]) {
        this.cache.setStar(this.$route.params.cid, null);
        alert('已取消收藏!');
        this.isStar = false;
      } else {
        let star = {
          title: this.video['title'],
          image: this.video['image'],
          time: new Date().getTime()
        };
        this.cache.setStar(this.$route.params.cid, star);
        this.isStar = true;
        alert('已成功收藏!');
      }
    },
    secret(string, code, operation) {
      code = CryptoJS.MD5(code).toString();
      var iv = CryptoJS.enc.Utf8.parse(code.substring(0, 16));
      var key = CryptoJS.enc.Utf8.parse(code.substring(16));
      if (operation) {
        return CryptoJS.AES.decrypt(string, key, {
          iv: iv,
          padding: CryptoJS.pad.Pkcs7
        }).toString(CryptoJS.enc.Utf8);
      }
      return CryptoJS.AES.encrypt(string, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      }).toString();
    }
  }
};
</script>
<style scoped  src="./index.scss" lang="scss"></style>
